import * as THREE from '../../build/three.module.js';
import { TrackballControls } from '../../jsm/controls/TrackballControls.js';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);

const k = innerWidth / innerHeight,
      s = 65,
      camera = new THREE.PerspectiveCamera(s, k, 1, 1000);
camera.position.set(0, 0, 500);
camera.lookAt(scene.position);

scene.add(new THREE.AmbientLight(0x444444));

const light = new THREE.PointLight(0xffffff);
light.position.copy(camera.position);
scene.add(light);

// 闭合样条几何体1
const closedSpline = new THREE.CatmullRomCurve3([
  new THREE.Vector3(- 60, - 100, 60),
  new THREE.Vector3(- 60, 20, 60),
  new THREE.Vector3(- 60, 120, 60),
  new THREE.Vector3(60, 20, - 60),
  new THREE.Vector3(60, - 100, - 60),
]);
closedSpline.curveType = 'catmullrom';
closedSpline.closed = true; // 样条曲线闭合

const extrudeSetting = {
  steps: 100,
  bevelEnabled: false,
  extrudePath: closedSpline
}

const pts = [], count = 3;
for(let i = 0; i < count; i += 1) {
  let l = 20;
  var a = 2 * i / count * Math.PI;
  pts.push(new THREE.Vector2(Math.cos(a) * l, Math.sin(a) * l));
}
const shape = new THREE.Shape(pts);
const geo = new THREE.ExtrudeBufferGeometry(shape, extrudeSetting);
const mtl = new THREE.MeshLambertMaterial({ color: 0xb00000, wireframe: false });
const mesh = new THREE.Mesh(geo, mtl);
scene.add(mesh);

/**
 * 随机样条曲线
 */
const randomPoints = [];
for(let i = 0; i < 10; i += 1) {
  randomPoints.push(new THREE.Vector3( (i - 4.5) * 50, THREE.Math.randFloat(-50, 50), THREE.Math.randFloat(-50, 50) ));
}
const randomSpline = new THREE.CatmullRomCurve3(randomPoints);
const extrudeSetting2 = {
  steps: 100,
  bevelEnabled: false,
  extrudePath: randomSpline
}
const pts2 = [], num = 5;
for(let i = 0; i < num * 2; i += 1) {
  const l = i % 2 === 1 ? 10 : 20;
  const a = i / num * Math.PI;
  pts2.push(new THREE.Vector2(Math.cos(a) * l, Math.sin(a) * l));
}
const shape2 = new THREE.Shape(pts2);
const geo2 = new THREE.ExtrudeBufferGeometry(shape2, extrudeSetting2);
const mtl2 = new THREE.MeshLambertMaterial({ color: 0xff8000, wireframe: false });
const mesh2 = new THREE.Mesh(geo2, mtl2);
scene.add(mesh2);

/**
 * 斜面样条
 */
const materials = [mtl2, mtl];
const extrudeSetting3 = {
  depth: 20,
  step: 1,
  bevelEnabled: true, // 启用斜面
  bevelThickness: 2, // 斜面厚度
  bevelSize: 7, // 斜面尺寸
  bevelSegments: 1// 斜面分片数
}
const geo3 = new THREE.ExtrudeBufferGeometry(shape2, extrudeSetting3);
const mesh3 = new THREE.Mesh(geo3, materials);
mesh3.position.set(50, 100, 50);
scene.add(mesh3);

const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(devicePixelRatio);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new TrackballControls(camera, renderer.domElement);
controls.minDistance = 200;
controls.maxDistance = 500;

const animation = () => {
  requestAnimationFrame(animation);

  controls.update();
  renderer.render(scene, camera);
}
animation();

const handleWindowResize = () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(innerWidth, innerHeight);
}
window.addEventListener('resize', handleWindowResize);